<template>
	<view class="dmm-container dmm-container-grey">
		<view class="section bankCard">
			<view class="cardHeader">
				<image :src="agentInfo.agentBankcardIcon || '/static/imgs/avatar.png'" mode=""></image>
		
				<view class="desc">
					<text class="bankName">{{agentInfo.agentBankName}}银行({{agentInfo.agentBankcardNo | slice(-4)}})</text>
					<view class="tip">
						<text class="text text-sm text-content">预计2小时内到账</text>
						<text class="text text-sm text-tip">到账银行卡</text>
					</view>
					
				</view>
			</view>
		</view>
		
		<view class="section wrapper">
			<text class="title text">提现金额</text>
			
			<view class="input-line">
				<text class="symbol">￥</text>
				<u--input
					placeholder="请输入金额"
					type="digit"
					clearable
					placeholderStyle="color: #d7d7d7"
					color="#EFB702"
					fontSize="52rpx"
					border="none"
					v-model="money"
					@change="onMoneyChange"
				></u--input>
				
				<text class="text text-primary btn" @click="money = accountInfo.availbleBalance">全部提现</text>
			</view>
			
			<view class="balance">
				<text class="text text-content text-sm">当前账户金额：</text>
				<text class="text text-sm">{{accountInfo.availbleBalance}}元</text>
			</view>
		</view>
		
		<view class="checkbox" @click="tapSelect">
			<image :src="selectBtnImg" mode=""></image>
			<text class="text text-sm text-primary text-sm" @click="uniHistory.push('/pages/agreements/rate')">《个税服务协议》</text>
		</view>
		
		<u-button type="primary" text="提现" :disabled="money <= 0" @click="beforeWithdraw"></u-button>
		
		<u-modal class="tipModal" :show="showTip" title="提示" showCancelButton closeOnClickOverlay confirmText="去设置" confirmColor="#222" cancelColor="#666" @close="showTip = false" @cancel="showTip = false" @confirm="uniHistory.push('/pages/setPassword/resetPassword'); showTip = false">
		<view class="slot-content">
			<text class="text text-sm">您还没有设置支付密码</text>
			<text class="text text-sm">密码设置后再进行交易</text>
		</view>
	</u-modal>
		
		<u-popup class="passwordModal" :show="showPasswrod" mode="center" closeable @close="passwordClose">
			<view class="modal-content">
				<text class="text title">请输入支付密码</text>
				
				<text class="text text-primary">提现：¥{{money}}</text>
				
				<u-code-input dot disabledDot disabledKeyboard space="14rpx" v-model="password" :maxlength="6"></u-code-input>
				
				<u-button type="primary" text="确定"></u-button>
				
				<text class="text text-primary" @confirm="uniHistory.push('/pages/setPassword/resetPassword')">忘记支付密码？</text>
			</view>
		</u-popup>
		
		<u-keyboard mode="number" :overlay="false" zIndex="11000" :show="showPasswrod" :dotDisabled="true" :showTips="false" :showCancel="false" :showConfirm="false" safeAreaInsetBottom :closeOnClickOverlay="false" class="kb" @change="kbChange" @backspace="kbBackspace"></u-keyboard>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from "vuex"
	
	export default {
		data() {
			return {
				money: '',
				isSelected: true,
				showTip: false,
				password: '',
				showPasswrod: false
			}
		},
	
		computed: {
			...mapState('home', ['agentInfo']),
			...mapState('setPassword', ['hasSetPayPassword']),
			...mapState('withdrawals', ['accountInfo']),
			selectBtnImg: function() {
				return this.isSelected ? '/static/imgs/icon_selected.png' : '/static/imgs/icon_unselected.png'
			},
		},
		
		methods: {
			...mapActions('withdrawals', ['withdraw', 'getAccountInfo']),
			...mapActions('setPassword', ['getPasswordStatus']),
					
			tapSelect() {
				this.isSelected = !this.isSelected
			},
			
			onMoneyChange(money) {
				if (money > this.accountInfo.availbleBalance) this.money = this.accountInfo.availbleBalance
			},
			
			beforeWithdraw() {
				if (!this.isSelected) return this.$t.message.info('请先勾选，个税服务协议')
				if (!this.hasPayPassword) return this.showTip = true
				this.showPasswrod = true
			},
			
			invokeWithdraw() {
				const {money, password} = this
				
				this.withdraw({withdrawAmt: money, paymentpassword: password, agreeAgreement: '1'})
					.then(() => {
						this.passwordClose()
						this.uniHistory.push(`/pages/withdrawals/result?money=${this.money}`)
					})
			},
			
			passwordClose() {
				this.showPasswrod = false
				this.password = ''
			},
			
			kbChange(val) {
				if (this.password.length < 6) {
					this.password += val
				}
			},
			
			kbBackspace() {
				if (this.password.length) this.password = this.password.substr(0, this.password.length - 1)
			}
		},
		
		onShow() {
			this.getAccountInfo()
		},
	
		created() {
			this.getPasswordStatus()
		},
	}
</script>

<style lang="scss">
	.bankCard {
		padding: 40rpx 30rpx;
		
		.cardHeader {
			display: flex;
			flex-direction: row;
			align-items: center;
		
			image {
				height: 54rpx;
				width: 54rpx;
				margin-right: 28rpx;
			}
			
			.desc {
				display: flex;
				flex-direction: column;
				flex: 1;
			}
		
			.bankName {
				font-size: 30rpx;
				font-weight: 700;
				color: $u-main-color;
				margin-bottom: 10rpx;
			}
		
			.tip {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}
		}
	}
	
	.wrapper {
		display: flex;
		flex-direction: column;
		padding: 34rpx 30rpx 20rpx;
		
		.title {
			margin-bottom: 34rpx;
		}
		
		.input-line {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid $u-bg-color;
			margin-bottom: 12rpx;
			
			.symbol {
				font-size: 66rpx;
				margin-right: 20rpx;
			}
			
			.u-input {
				/deep/ .u-input__content {
					.uni-input-placeholder {
						font-size: 42rpx;
					}
				}
			}
			
			.btn {
				height: 30rpx;
				line-height: 30rpx;
			}
		}
	}
	
	.checkbox {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 60rpx;
		margin-bottom: 60rpx;
		
		image {
			height: 24rpx;
			width: 24rpx;
			margin-right: 16rpx;
			margin-top: 4rpx;
		}
	}
	
	.u-button {
		width: 660rpx !important;
	}
	
	.u-popup.tipModal {
		/deep/ .u-popup__content {
			width: 540rpx;
			border-radius: $uni-border-radius-lg;
		}
		
		/deep/ .u-modal {
			width: auto !important;
			.u-modal__title {
				color: $u-main-color;
				font-size: 34rpx;
			}
			.u-modal__content {
				padding-bottom: 30rpx;
				view {
					display: flex;
					flex-direction: column;
					
					text {
						line-height: 36rpx;
					}
				}
			}
			.u-modal__button-group__wrapper--cancel {
				background-color: $u-bg-color;
			}
		}
	}
	
	.passwordModal {
		/deep/ .u-popup__content {
			width: 600rpx;
			padding: 60rpx 30rpx 50rpx;
			border-radius: $uni-border-radius-lg;
			
			.modal-content {
				display: flex;
				flex-direction: column;
				align-items: center;
				
				.title {
					font-size: 34rpx;
					margin-bottom: 26rpx;
				}
				
				.u-code-input {
					margin: 40rpx 0;
					.u-code-input__item {
						height: 82rpx !important;
						width: 82rpx !important;
						border-radius: $uni-border-radius-base;
					}
				}
				
				.u-button {
					width: 472rpx !important;
					margin-bottom: 40rpx;
				}
			}
			
		}
	}
	
	
</style>
